<template>
  <div class="app-container">
    <FormFilterTransfer @on-filter="submitFilterForm" />
    <div class="button-group" style="padding: 20px 0">
      <!-- <el-button-group>
        <el-button
          size="mini"
          type="primary"
          @click="onClickMultipApply"
          v-if="roleCheck('manual-batch-repair')"
        >
          {{ $t('language.finance.recharge.batchReplenishment') }}
        </el-button>
      </el-button-group> -->
    </div>
    <el-table
      :data="tableData.list"
      height="500"
      v-loading="loading"
      element-loading-text="加载中..."
      show-summary
      border
      :summary-method="getLocalSummaries"
      class="el-table-align-center"
      ref="tableList"
    >
      <!--<el-table-column width="150" label="序号" type="index" align="center">-->
      <!--</el-table-column>-->
      <el-table-column :label="$t('language.finance.recharge.rechargeTime')" width="90" align="center">
        <template slot-scope="{row}">
          <div>{{row.createDate | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.rechargeNumber')" width="100" align="center">
        <template slot-scope="{row}">
          <div>{{row.orderId}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.accountType')" align="center">
        <template slot-scope="{row}">
<!--          {{getLabel(row.userType, payEnum.USER_TYPE)}}-->
          {{toSwitchData('language.finance.consts.USER_TYPE', row.userType)}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.level')" prop="userLevel" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.accountName')" prop="username" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.name')" prop="reallyName" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.depositAmount')" prop="amount" width="100" align="center">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column sortable :label="$t('language.finance.recharge.handlingFee')" prop="fee" width="90" align="center">
        <template slot-scope="{row}">
          {{row.fee | currency('', 2, {type: 1})}}
        </template>
      </el-table-column>
      <!--<el-table-column sortable label="到账金额" width="120" prop="payAmount" align="center">-->
        <!--<template slot-scope="{row}">-->
          <!--{{row.paragraph| currency}}-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column :label="$t('language.finance.recharge.postscript')" prop="keyword" align="center">
      </el-table-column>

      <el-table-column :label="$t('language.finance.recharge.operatingTime')" width="90" align="center">
        <template slot-scope="{row}">
          {{row.createDate | toTime}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.depositType')" width="90" align="center">
        <template slot-scope="{row}">
<!--          {{getLabel(row.limitType, payEnum.DEPOSIT_TYPE)}}-->
          {{toSwitchData('language.finance.consts.DEPOSIT_TYPE', row.limitType)}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.paymentStatus')"  align="center">
        <template slot-scope="{row}">
<!--            <span v-if="row.subStatus != 0">{{row.subStatus | toConverter('PAYMENT_STATUS')}}</span>-->
            <span v-if="[1,2].includes(row.status)">{{toSwitchData('language.finance.consts.PAYMENT_SUB_STATUS', row.subStatus)}}</span>
<!--            <span v-else>{{row.status | toConverter('PAYMENT_STATUS')}}</span>-->
<!--          <span v-else>{{row.status | toConverter('PAYMENT_STATUS') }}</span>-->
          <span v-else>{{toSwitchData('language.finance.consts.PAYMENT_STATUS_BACK', row.status)}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.paymentTypes')" align="center">
        <template slot-scope="{row}">
<!--          {{row.paymentId | toConverter('RECHARGE_TYPE_NAMES')}}-->
          {{toSwitchData('language.finance.consts.RECHARGE_TRANSFER_TYPE_NAMES', row.paymentId)}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.recipientBank')" align="center">
        <template slot-scope="{row}">
          <div>{{row.bankName }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.recipientBankCard')" width="120" align="center">
        <template slot-scope="{row}">
          <div>{{row.cardNo }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.nameOfPayee')" align="center">
        <template slot-scope="{row}">
          <div>{{row.cardUsername }}</div>
        </template>
      </el-table-column>
      <!--<el-table-column label="到账时间" prop="addTime" align="center">-->
        <!--<template slot-scope="{row}">-->
          <!--{{ row.sucApvTime | toTime}}-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column :label="$t('language.finance.withdrawal.receiptMerchant')"  align="center">
        <template slot-scope="{row}">
          {{row.merchantName }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.receiptMerchantNumber')"  align="center">
        <template slot-scope="{row}">
          {{row.merchantCode}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.operationEnd')"  align="center">
        <template slot-scope="{row}">
          {{row.clientType | toConverter('PAYMENT_PLATFORM') }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.recharge.remarks')"  align="center">
        <template slot-scope="{row}">
          {{ row.sucReqRemark}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.operation')" fixed="right" width="220" align="center">
        <template slot-scope="{row}">
          <el-button
            type="warning"
            size="mini"
            @click="openDialog({dialogName: dialogType.applyReorder, props: row })"
            v-if="roleCheck('manual-repair') && checkShowOpt(row)"
          >
            {{$t('language.finance.recharge.makeUp')}}
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="openDialog({dialogName: dialogType.refusedReorder, props: row })"
            v-if="roleCheck('manual-repair') && checkShowOpt(row)"
          >
           {{$t('language.finance.recharge.RefuseMakeUp')}}
          </el-button>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="gridSizeChange"
        @current-change="gridCurrentChange"
        :current-page="filters.page"
        :page-sizes="gridPageSize"
        :page-size="filters.size"
        :layout="gridLayout"
        :total="tableData.total"
      >
      </el-pagination>
    </div>
    <ApplyReorderDialog
      v-if="dialogName === dialogType.applyReorder"
      :row-data="dialogProps"
      v-model="dialogVisible"
      :page="1"
      :id="dialogProps.id"
      @submit="submitFinished"
    />
    <RefusedReorderDialog
      v-if="dialogName === dialogType.refusedReorder"
      :row-data="dialogProps"
      v-model="dialogVisible"
      :id="dialogProps.id"
      @submit="submitFinished"
    />
    <MultipleRechargeDialog
      v-if="dialogName === dialogType.multipleRecharge"
      v-model="dialogVisible"
      @multipleNext="onClickMultipleNext"
    />
    <ConfirmMultipleDialog
      v-if="dialogName === dialogType.confirmMultiple"
      v-model="dialogVisible"
      :row-data="dialogProps"
    />
  </div>
</template>


<script>

// components
import FormFilterTransfer from './formFilterTransfer';
import ApplyReorderDialog from './applyReorderDialog';
import RefusedReorderDialog from './refusedReorderDialog';
import MultipleRechargeDialog from './multipleRechargeDialog';
import ConfirmMultipleDialog from './confirmMultipleDialog';

// services
import { getRechargeLogs } from '@/services/api/recharge';

// mixins
import { grid, constsLabel, dialog, switchData } from '@/build';
import moment from "moment";

const dialogType = {
  applyReorder: 'apply-reorder-dialog',
  refusedReorder: 'refused-reorder-dialog',
  multipleRecharge: 'multiple-recharge-dialog',
  confirmMultiple: 'confirm-multiple-dialog',
};

export default {
  name: 'recharge-logs',
  components: {
    FormFilterTransfer,
    ApplyReorderDialog,
    RefusedReorderDialog,
    MultipleRechargeDialog,
    ConfirmMultipleDialog,
  },
  mixins: [grid, constsLabel, dialog, switchData],
  data() {
    return {
      tableData: {},
      rowData: {},
      filters: {
        page: 1,
        size: 20,
        dateType: 1,
        searchType: 1,
        paymentId: -3,
        status: '0,3',
        subStatus: '5,6',
        startTime: moment().format('YYYY-MM-DD 00:00:00'),
        endTime: moment().format('YYYY-MM-DD 23:59:59'),
        userType: -1,
      },
      dialogType,
      statistic: [
        {
          index: 6,
          prop: 'amount',
          format: value => _.currency(value),
        },
        {
          index: 7,
          prop: 'fee',
          format: value => _.currency(value, '', 2, { type: 1 }),
        },
        {
          index: 8,
          prop: '',
          format: value => '',
        },
      ],
    };
  },
  watch: {
    tableData: {
      handler(newVal) {
        this.$nextTick(() => {
          this.$refs.tableList.doLayout(); // 获取表格数据后，从新计算表格布局，防止表格错位的问题
        });
      },
    },
  },
  methods: {
    onClickMultipApply() {
      this.openDialog({ dialogName: dialogType.multipleRecharge });
    },
    onClickMultipleNext(val) {
      this.openDialog({ dialogName: dialogType.confirmMultiple, props: val });
    },
    checkShowOpt(row) {
      const { subStatus, status } = row;
      if (status === 2) {
        return subStatus === 5 || subStatus === 6;
      }
      return status === 0;
    },
    submitFilterForm(formInline) {
      const { time } = formInline;
      let startTime;
      let endTime;
      if (!_.isUndefined(time) && _.isArray(time)) {
        startTime = moment(time[0]).format('YYYY-MM-DD HH:mm:ss');
        endTime = moment(time[1]).format('YYYY-MM-DD HH:mm:ss');
        formInline = { ...formInline, startTime, endTime };
      } else {
        this.filters.startTime = undefined;
        this.filters.endTime = undefined;
      }
      if (!formInline.subStatus) {
        delete this.filters.subStatus;
      }

      this.filters = { ...this.filters, ...formInline };
      this.gridSearch();
    },
  },
  mounted() {
    this.bindGet(getRechargeLogs, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      beforeSend: (data) => {
        delete data.time;
        if (Array.isArray(data.status)) {
          delete data.status;
        }
        return data;
      },
      format: (data) => {
        data.list.forEach((v) => {
          this.$set(v, 'paragraph', v.amount - v.fee);
        });
        return data;
      },
    });
    this.getAll();
  },
};
</script>

<style scoped lang="scss">
/deep/ {
  thead .cell{
    word-break: break-word;
  }
  .el-table-align-center{
    .el-table__body-wrapper{
      max-height: 404px;
    }
  }
  .el-table__fixed-right{
    .el-table__fixed-body-wrapper{
      max-height: 404px;
    }
  }
}
</style>
